<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";

// 日志数量趋势（模拟数据，后端接口补充后可替换）
const trendChartRef = ref();
const trendChart = ref();
const trendOption = ref({});
const fetchTrendData = async () => {
  // TODO: 替换为后端接口
  const days = Array.from({ length: 30 }, (_, i) => `8-${i + 1}`);
  const logs = days.map(() => Math.floor(Math.random() * 20 + 5));
  trendOption.value = {
    title: { text: "近一月操作日志数量趋势", left: "center" },
    tooltip: { trigger: "axis" },
    xAxis: { type: "category", data: days },
    yAxis: { type: "value" },
    series: [
      { name: "日志数量", type: "line", data: logs },
    ],
  };
  await nextTick();
  if (!trendChart.value) trendChart.value = echarts.init(trendChartRef.value);
  trendChart.value.setOption(trendOption.value);
};

// 日志类型分布（模拟数据，后端接口补充后可替换）
const typeChartRef = ref();
const typeChart = ref();
const typeOption = ref({});
const fetchTypeData = async () => {
  // TODO: 替换为后端接口
  const data = [
    { name: "登录", value: 120 },
    { name: "增删改", value: 80 },
    { name: "查询", value: 200 },
    { name: "异常", value: 10 },
  ];
  typeOption.value = {
    title: { text: "日志类型分布", left: "center" },
    tooltip: { trigger: "item" },
    legend: { bottom: 10, left: "center" },
    series: [
      {
        name: "类型",
        type: "pie",
        radius: "60%",
        data,
        label: { formatter: "{b}: {c} ({d}%)" },
      },
    ],
  };
  await nextTick();
  if (!typeChart.value) typeChart.value = echarts.init(typeChartRef.value);
  typeChart.value.setOption(typeOption.value);
};

onMounted(() => {
  fetchTrendData();
  fetchTypeData();
});
</script>

<template>
  <div>
    <h2>日志信息统计</h2>
    <div style="display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 32px;">
      <div style="flex:1; min-width: 400px; height: 400px;">
        <div ref="trendChartRef" style="width: 100%; height: 100%"></div>
      </div>
      <div style="flex:1; min-width: 400px; height: 400px;">
        <div ref="typeChartRef" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
h2 {
  margin-bottom: 24px;
}
</style> 